<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{count}}</strong></span>
    <ul class="filters" @click= "fn">
      <li>
        <!--1.判断谁应该有高亮的样式 ：动态class 
        <!-- 2.判断点击谁 谁高亮--> 
        <a :class="{selected: isSel ==='all'}" href="javascript:;" @click="isSel='all'">全部</a>
      </li>
      <li>
        <a :class="{selected: isSel ==='no'}"href="javascript:;" @click="isSel='no'">未完成</a>
      </li>             
      <li>
        <a :class="{selected: isSel ==='yes'}" href="javascript:;" @click="isSel='yes'" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clickFn">清除已完成</button>
  </footer>
</template>

<script>
export default {
   data(){
    return{
      isSel:"all"
    }
  },
  // 定义数组
props:['newArr'],
// 计算属性
computed:{
  count(){
    //数组的长度就是当前任务的总数值
    return this.newArr.length
  },
},
methods:{
  fn(){
    // 父传子 把数据类型传给父组件
    this.$emit('changeType',this.isSel)
  },
  clickFn(){
    // 清空已完成的任务名
    this.$emit("clear")
  }
}
}

</script>